<div class="well form-actions">
  <a href="#" class="btn btn-primary pull-left" data-code="show">
    toggle code examples for each form element.
  </a>
  <a href='#' id='toggle-form' class='btn pull-right'>
    toggle between vertical and horizontal form
  </a>
</div>

<%= simple_form_for @article, :html => { :class => 'form-horizontal' } do |f| %>
<pre class='prettyprint linenums lang-rb'>
# If you generated the SimpleForm configuration with `--bootstrap`, the `simple_form_for` helper will use the bootstrap wrapper by default.
simple_form_for(@article, :html =&gt; { :class =&gt; 'form-horizontal' }) do |f|
</pre>

  <% if notification = f.error_notification %>
    <div class="alert alert-error fade in">
      <a class="close" data-dismiss="alert" href="#">&times;</a>
      <%= notification %>
    </div>
  <% end %>

  <legend>Article</legend>
  <%= f.input :name, :input_html => { :class => "span6" },
              :hint => "add your article title here" %>
<pre class='prettyprint linenums lang-rb'>
  # You can use the same `span*` classes from the grid system.
  f.input :name, :input_html =&gt; { :class =&gt; "span6" }, :hint =&gt; "add your article title here"
</pre>

  <%= f.input :name, :wrapper => :prepend, :label => false do %>
    <%= content_tag :span, "Name", :class => "add-on" %>
    <%= f.input_field :name %>
  <% end %>

<pre class='prettyprint linenums lang-rb'>
  # Use different wrappers to use other elements from Bootstrap, like a 'prepend' box.
  f.input :name, :wrapper =&gt; :prepend, :label =&gt; false do
    content_tag :span, "Name", :class =&gt; "add-on"
    f.input_field :name
  end
</pre>

  <%= f.input :published, :as => :boolean %>

<pre class='prettyprint linenums lang-rb'>
  f.input :published, :as =&gt; :boolean
</pre>

  <%= f.input :content_type, :collection => content_type_options, :as => :check_boxes, :label => 'Stacked checkboxes' %>
<pre class='prettyprint linenums lang-rb'>
  f.input :content_type, :collection =&gt; content_type_options, :as =&gt; :check_boxes
</pre>

  <%= f.input :content_type, :collection => content_type_options, :as => :check_boxes, :item_wrapper_class => 'inline', :label => 'Inline checkboxes' %>
<pre class='prettyprint linenums lang-rb'>
  f.input :content_type, :collection =&gt; content_type_options, :as =&gt; :check_boxes, :item_wrapper_class =&gt; &#x27inline&#x27;
</pre>

  <%= f.input :content_type, :collection => content_type_options, :as => :radio_buttons, :label => 'Stacked radios' %>

<pre class='prettyprint linenums lang-rb'>
  f.input :content_type, :collection =&gt; content_type_options, :as =&gt; :radio_buttons
</pre>


  <%= f.input :content_type, :collection => content_type_options, :as => :radio_buttons, :item_wrapper_class => 'inline', :label => 'Inline radios' %>

<pre class='prettyprint linenums lang-rb'>
  f.input :content_type, :collection =&gt; content_type_options, :as =&gt; :radio_buttons, :item_wrapper_class =&gt; &#x27;inline&#x27;
</pre>

  <%= f.input :content_type, :collection => content_type_options,
              :hint => "multiple select", :input_html => { :multiple => true } %>
<pre class='prettyprint linenums lang-rb'>
  f.input :content_type, :collection =&gt; content_type_options, :input_html =&gt; { :multiple =&gt; true }
</pre>

  <%= f.input :category, :collection => content_type_options,
              :hint => "simple select box" %>
<pre class='prettyprint linenums lang-rb'>
  f.input :category, :collection =&gt; content_type_options, :hint =&gt; "simple select box"
</pre>

  <%= f.input :content, :input_html => { :class => "span6" } %>
<pre class='prettyprint linenums lang-rb'>
  f.input :content, :input_html =&gt; { :class =&gt; "span6" }
</pre>

  <%= f.input :disabled_text, :disabled => true,
              :hint => "an example of disabled input" %>

<pre class='prettyprint linenums lang-rb'>
  f.input :disabled_text, :disabled =&gt; true, :hint =&gt; "an example of disabled input"
</pre>

  <%= f.input :disabled_text, :wrapper => :prepend, :hint => 'This is the hint text' do %>
    <%= content_tag :span, :class => "add-on" do %>
      <%= check_box_tag :remove, 'true' %>
    <% end %>
    <%= f.input_field :disabled_text, :disabled => true %>
  <% end %>
<pre class='prettyprint linenums lang-rb'>
f.input :disabled_text, :wrapper =&gt; :prepend, :hint =&gt; "This is the hint text" do
  content_tag :span, :class =&gt; "add-on" do
    check_box_tag :remove, 'true'
  end
  f.input_field :disabled_text
end
</pre>

  <%= f.input :disabled_text, :wrapper => :append, :hint => 'This is the hint text' do %>
    <%= f.input_field :disabled_text, :class => :mini, :disabled => true %>
    <%= content_tag :span, :class => "add-on active" do %>
      <%= check_box_tag :remove, 'true' %>
    <% end %>
  <% end %>

<pre class='prettyprint linenums lang-rb'>
  # Use the 'append' wrapper the same way as the 'prepend' one.
  f.input :disabled_text, :wrapper =&gt; :append, :hint =&gt; "This is the hint text" do
    f.input_field :disabled_text, :class =&gt; :mini
    content_tag :span, :class =&gt; "add-on active" do
      check_box_tag :remove, 'true'
    end
  end
</pre>

  <div class="form-actions">
    <%= f.button :submit, :class => 'btn-primary' %>
    <%= submit_tag 'Cancel', :type => :reset, :class => "btn btn-danger" %>
  </div>
<pre class='prettyprint linenums lang-rb'>
  # SimpleForm buttons already receive the 'btn' class for Bootstrap.
  f.button :submit, :class =&gt; 'btn-primary'
  submit_tag 'Cancel', :type =&gt; :reset, :class =&gt; "btn btn-danger"
</pre>
<% end %>
